<!--
 * @Description: 
 * @Author: Cxy
 * @Date: 2023-07-24 22:21:49
 * @LastEditors: Cxy
 * @LastEditTime: 2024-09-05 17:24:21
 * @FilePath: \xy-admin\play\src\views\home\index.vue
-->
<script setup lang="ts">
import Commit from './commit.vue'
import CodeLanguage from './codeLanguage.vue'
import SubmitDetails from './submitDetails.vue'
import CodeLanguagePie from './codeLanguagePie.vue'

const commitDetail = ref()
if (process.env.mode === 'development') {
  fetch('src/views/home/1.json')
    .then(val => val.json())
    .then(val => {
      commitDetail.value = val
    })
} else {
  fetch('https://gitee.com/api/v5/repos/SeaHappy0501/blogAdmin/commits?page=1&per_page=100')
    .then(val => val.json())
    .then(val => {
      commitDetail.value = val
    })
}
</script>

<template>
  <div class="home">
    <el-card shadow="hover">
      <div class="introduce">
        <el-avatar
          size="large"
          fit="cover"
          shape="square"
          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        />
        <div>
          <p>旨在开发一套简单、功能强大的后台管理系统</p>
          <p>用最简单的代码写最复杂的逻辑</p>
        </div>
      </div>
    </el-card>
    <Commit :commitDetail="commitDetail" class="echarts" />
    <CodeLanguagePie class="echarts" />
    <SubmitDetails :commitDetail="commitDetail" class="echarts" />
    <CodeLanguage class="echarts" />
  </div>
</template>

<style lang="scss" scoped>
.home {
  :deep(.introduce) {
    display: flex;

    & > div:last-child {
      font-size: pxToRem(12);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: pxToRem(16);

      & > p:first-child {
        font-size: pxToRem(20);
        font-weight: bold;
      }

      & > p:last-child {
        color: #999999;
      }
    }
  }

  .echarts {
    width: calc(100% / 2 - pxToRem(10));
    height: pxToRem(380);
    display: inline-block;
    margin-top: pxToRem(20);
    &:nth-child(2n) {
      margin-right: pxToRem(20);
    }
    :deep(.el-card__body) {
      padding: pxToRem(16);
      height: 100%;
    }
  }
}

@include media('smallScreen') {
  .home {
    .echarts {
      width: 100%;
      margin: pxToRem(20) 0;
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
}
</style>
